<template>
  <div class="category-carousel">
    <div class="section-header">
      <h3>
        <i class="fas fa-leaf"></i>
        <span>产品分类</span>
      </h3>
      <NuxtLink to="/products" class="more-link">
        <span>查看全部</span>
        <i class="fas fa-angle-double-right"></i>
      </NuxtLink>
    </div>
    
    <div class="category-grid">
      <NuxtLink 
        v-for="category in categories" 
        :key="category.id"
        :to="category.link"
        class="category-card"
      >
        <div class="category-image">
          <img :src="category.image" :alt="category.title" />
          <div class="category-overlay"></div>
        </div>
        <div class="category-info">
          <h4>{{ category.title }}</h4>
          <p>{{ category.desc }}</p>
        </div>
      </NuxtLink>
    </div>
  </div>
</template>

<script setup>
const categories = [
  {
    id: 1,
    title: '菌种',
    desc: '优质菌种、母种、原种',
    image: '/images/category-strain.jpg',
    link: '/products/strain'
  },
  {
    id: 2,
    title: '香菇',
    desc: '鲜香菇、干香菇、香菇制品',
    image: '/images/category-shiitake.jpg',
    link: '/products/shiitake'
  },
  {
    id: 3,
    title: '木耳',
    desc: '黑木耳、白木耳、木耳制品',
    image: '/images/category-fungus.jpg',
    link: '/products/fungus'
  },
  {
    id: 4,
    title: '其他食用菌',
    desc: '平菇、金针菇、猴头菇等',
    image: '/images/category-others.jpg',
    link: '/products/others'
  },
  {
    id: 5,
    title: '深加工产品',
    desc: '菌菇酱、速食汤、调味品',
    image: '/images/category-processed.jpg',
    link: '/products/processed'
  }
]
</script>

<style lang="scss" scoped>
.category-carousel {
  min-height: 300px;
  padding: 20px 0;
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    
    h3 {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: #333;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -8px;
        width: 100%;
        height: 3px;
        background: #e4393c;
      }
      
      i {
        color: #e4393c;
        font-size: 22px;
      }
    }
    
    .more-link {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #666;
      font-size: 14px;
      text-decoration: none;
      transition: all 0.3s;
      
      &:hover {
        color: #e4393c;
      }
      
      i {
        font-size: 14px;
      }
    }
  }
  
  .category-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: $spacing-md;

    @include tablet {
      grid-template-columns: repeat(3, 1fr);
      gap: $spacing-sm;
    }

    @include mobile {
      grid-template-columns: repeat(2, 1fr);
      gap: $spacing-sm;
    }
    
    .category-card {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      text-decoration: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: all 0.3s;
      background: #fff;
      min-height: 200px;
      
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        
        .category-info {
          h4 {
            color: #e4393c;
          }
        }
      }
      
      .category-image {
        position: relative;
        width: 100%;
        height: 60%;
        overflow: hidden;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: all 0.3s;
        }
      }
      
      .category-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 15px;
        background: #fff;
        color: #333;
        z-index: 1;
        text-align: center;
        
        h4 {
          margin: 0 0 6px;
          font-size: 16px;
          font-weight: 600;
          color: #333;
          transition: all 0.3s;
        }
        
        p {
          margin: 0;
          font-size: 12px;
          color: #666;
          line-height: 1.4;
        }
      }
    }
  }
}
</style>








